{% include 'QLGL/QLGL_index.html' %}

<div class="am-cf admin-main">
  {% include 'sidebar.html' %}
  <!-- content start -->
  <div class="admin-content">
    <div class="admin-content-body">
      <div class="am-cf am-padding">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">巡检业务</strong></div>
      </div>
      <div class="am-g" style="position: absolute;height: 100%;right: 0px;left: 260px;width: auto;">

        {% include 'QLGL/XJYW/QLGL_XJYW_SIDEBAR.html' %}
        
        <div class="am-u-sm-10" style="position: absolute;width:auto;right:0;left: 200px;overflow-y: scroll;;bottom: 100px;top: 0px;">
          <div class="am-u-sm-12 am-u-md-6">
            <div class="am-btn-toolbar">
              <div class="am-btn-group am-btn-group-xs">
                <button  type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary" onclick="back_to()">返回</button>
              </div>
            </div>
          </div>

          <div class="am-form-group" style="margin-top: 60px">
            <div class="am-g am-margin-top am-form-group" style="padding-left: 100px;">
              <label>基本信息</label>         
            </div>
            <div class="am-g am-margin-top am-form-group">
              <div class="am-u-sm-5 am-u-md-2 am-text-right">部件名称：</div>
              <div class="am-u-sm-7 am-u-md-3 am-u-end" >
                <div  id='parts_code' attr1="{{ checkRecordInfo.0.parts_code }}">{{ checkRecordInfo.0.parts_name }}</div>

              </div>
              
              <div class="am-u-sm-5 am-u-md-2 am-text-right">构件编号：</div>
              <div class="am-u-sm-7 am-u-md-3 am-u-end" >
                <div  id='bridge_member' attr1={{ checkRecordInfo.0.member_id }} attr2={{ checkRecordInfo.0.member_name }}>{{ checkRecordInfo.0.member_no }}</div>
              </div>          
            </div>

            <div class="am-g am-margin-top am-form-group">
              <div class="am-u-sm-5 am-u-md-2 am-text-right">病害类型：</div>
              <div class="am-u-sm-7 am-u-md-3 am-u-end" >
                <select  id='disease_id' class="am-u-md-12"  data-am-selected="{searchBox: 1}" onchange="disease_change()">
                  {% for i in diseaseInfo %}
                  {% if i.disease_id == checkRecordInfo.0.disease_id %}
                  <option value={{ i.disease_id }} selected="selected">{{ i.disease_name }}</option> 
                  {% else %}
                  <option value={{ i.disease_id }} >{{ i.disease_name }}</option> 
                  {% endif %}
                  {% endfor %}
                </select>
              </div>
              <div class="am-u-sm-5 am-u-md-2 am-text-right">标度：</div>
              <div class="am-u-sm-7 am-u-md-3 am-u-end" >
                <select  id='disease_scale_id'  class="am-u-md-10" onchange="scale_change()"  data-am-selected="{searchBox: 1}">
                  {% for i in levelInfo %}
                  {% if i.disease_scale_id == checkRecordInfo.0.disease_scale_id %}
                  <option value="{{ i.disease_scale_id }},{{ i.sumup }}" selected="selected">{{ i.level }}</option> 
                  {% else %}
                  <option value="{{ i.disease_scale_id }},{{ i.sumup }}" >{{ i.level }}</option> 
                  {% endif %}
                  {% endfor %}
                </select>
                </select>
              </div>          
            </div>

            <div class="am-g am-margin-top am-form-group">
              <div class="am-u-sm-5 am-u-md-2 am-text-right">标度综合描述：</div>
              <div class="am-u-sm-7 am-u-md-3 am-u-end"  >
                <div id="description" class="am-u-md-10"  style="height: 6rem;border: 1px solid #dcdbdb;word-break: break-all;word-wrap: break-word;overflow-y: auto;padding: 0 5px;">{{ checkRecordInfo.0.parts_code }}</div>

              </div>

              <div class="am-u-sm-5 am-u-md-2 am-text-right">病害位置：</div>
              <div class="am-u-sm-7 am-u-md-2 am-u-end" >
                <div id="position"  style="height: 6rem;border: 1px solid #dcdbdb;word-break: break-all;word-wrap: break-word;overflow-y: auto;padding: 0 5px;">{{ checkRecordInfo.0.position }}</div>
              </div>
              <div class="am-u-sm-7 am-u-md-1 am-u-end" >
                <button class="am-btn am-btn-default am-btn-xs am-text-secondary" onclick="disease_position()"><span class="am-icon-plus"></span></button>
              </div>
                      
            </div>


            <div class="am-g am-margin-top am-form-group">
              <div class="am-u-sm-5 am-u-md-2 am-text-right">病害描述：</div>
              <div class="am-u-sm-7 am-u-md-3 am-u-end" >
                <div id="description_des" class="am-u-md-10"  style="height: 11rem;border: 1px solid #dcdbdb;word-break: break-all;word-wrap: break-word;overflow-y: auto;padding: 0 5px;">{{ checkRecordInfo.0.description }}</div>
                <input type="hidden" name="" id="data_past" >
              </div>
              <div class="am-u-sm-5 am-u-md-2 am-text-right">备注：</div>
              <div class="am-u-sm-7 am-u-md-3 am-u-end" >
                <textarea rows="4" class="am-u-md-10" id="remark">{{ checkRecordInfo.0.remark }}</textarea>
              </div>           
            </div>

            <div class="am-g am-margin-top am-form-group">
              <div class="am-u-sm-5 am-u-md-2 am-text-right">媒体信息：</div>
              <div class="am-u-sm-7 am-u-md-10 am-text-middle" >
                <input type="file" id="file_choose" style="display: none;" >
                <button  type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary" onclick="add_img()" id="add_botton">添加</button>
                <input type="hidden" id="img_id">
              </div>
          
            </div>

            <br>

            <div class="am-g am-margin-top am-form-group">

              <div style="margin: 5px 10%;" id="img_ul" >
                {% for i in photoInfo %}
                <div class="imgDiv" >
                  <img src="{{ i.file_url }}"  style="max-width: 500px;padding: 5px;"/>
                  <div class="delete" attr1="{{ i.file_name }}"  attr2="{{ i.file_url }}"  attr3="{{ i.file_id }}"> 
                  </div>
                </div>
                {% endfor %}
              </div>

            </div>
          </div>
          <br>

          <div class="am-u-sm-12 am-u-md-6">
            <div class="am-btn-toolbar ">
              <div class="am-btn-group am-btn-group-xs"  style="float: right;">
                <button  type="button" class="am-btn am-btn-primary btn-loading-example" onclick="save_add()">保存</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="/static/assets/js/jquery.min.js"></script>
<!--<![endif]-->
<script src="/static/assets/js/amazeui.min.js"></script>
<script src="/static/assets/js/amazeui.tree.js"></script>
<script type="text/javascript" src="/static/assets/js/layer.js"></script>
<script src="/static/assets/datatables/amazeui.datatables.min.js"></script>
<script src="/static/assets/dialog/amazeui.dialog.min.js"></script>
<script src="/static/assets/js/amazeui.chosen.min.js"></script>
<link rel="stylesheet" type="text/css" href="/static/assets/css/amazeui.tree.css" />
<script src="/static/assets/js/app.js"></script>
<style type="text/css">
  .li_a {
    color: #5c5c5c;
  }
  .imgDiv {
            display: inline-block;
            position: relative;
            float: left;
        }
 
        .imgDiv .delete {
          background:url("/static/assets/i/close.png");
            position: absolute;
            top: 0px;
            right: 0px;
            width: 17px;
            height: 17px;
            display: none;
        }
</style>

 <script type="text/javascript">

//var slider = $('#slider').data('flexslider');


  var attrInfo = {{ attrInfo|safe }};
  var check_record_id = {{ check_record_id|safe }};
  $('#data_past').val(JSON.stringify(attrInfo));



  $("#collapse-nav1").addClass("am-in");
  $("#qlgl").removeClass("am-collapsed");
  $("#qlglOxjyw").css("color", "#3399CC");
  $("#qlgl").css("color", "#3399CC");
  $("#xjywOjcjc").removeClass("li_a");
    $.ajaxSetup({
        data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
      });

  $(document).ready(function(){

    scale_change();
    init();

  })

  // var bridge_id = {{ bridge_id|safe }};
  // var check_id = {{ check_id|safe }};

  function back_to(){
    window.history.back(-1);
  }

  function disease_change(){
    print_id('','','');
    var disease_id = $("#disease_id option:selected").val();
    $.ajax({
      "url":"/QLXJ_XJYW_DQJC_DATA_LEVEL/?disease_id="+disease_id+"",
      "datatype":"json",
      "type":"get",
      "async":"false"
    }).success(function(data){
      if (data.status == 1) {
        $("#disease_scale_id").empty();
        for(var i=0;i<data.data.length;i++){
          $('#disease_scale_id').append('<option value="'+data.data[i].disease_scale_id+','+data.data[i].sumup+'" >'+data.data[i].level+'</option>');
        } 
      } else {
        AlertMSG(data.message)
      }
    }).error(function(data){
      AlertMSG("查询病害信息失败！")
    });
  }


  function scale_change(){
    var disease_scale_id = $("#disease_scale_id option:selected").val();
    if(disease_scale_id != undefined){
      var number = disease_scale_id.indexOf(",");
      if(number >= 0){
        $('#description').html(disease_scale_id.substring(number+1));
      }else{
        $('#description').html();
      }
    }else{
      $('#description').html();
    }
  }

  function disease_position(){
    // var data_position = $("#data_past").val();
    // if(data_position != ""){
    //   alert("aaa");
    //   return;
    // }else{

    // }
    var disease_id = $("#disease_id option:selected").val();
    var member_id = $("#bridge_member").attr("attr1");
    if (disease_id != undefined && member_id != undefined){
      popup("病害位置","/QLXJ_XJYW_JCJC_DISEASE_POSITION1/?disease_id="+disease_id+"&member_id="+member_id+"");
    }else{
      AlertMSG("请选择构件编号及病害类型！");
    }
    
  }

  function print_id(data,message1,message2){
    // console.log(data1);
    // console.log(data2);
    $('#position').html(message1);
    $('#description_des').html(message2);
    $('#data_past').val(data);

  }


  function add_img(){
    $("#file_choose").click();
  }

  var data_id = ''

  function init() {
    $(".imgDiv").mouseenter(function () {
      $(this).find(".delete").show();
    }); 
    $(".imgDiv").mouseleave(function () {
      $(this).find(".delete").hide();
    });
         
    $(".delete").on("click",function(){
      $(this).parent().remove();
    }) 
  }







  var upimg = document.querySelector('#file_choose');
  upimg.addEventListener('change', function(e) {
    var files = this.files;
    if(files.length) {
      if(checkFile(files)) {
        uploadFiles(files);
      }
    }
  });

  function checkFile(files) {
    if(files.length == 1) {
      //console.log(files[0].type);
      // var aaa = ^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))(.JPEG|.jpeg|.JPG|.jpg|.GIF|.gif)$
      if(!files[0].type.match(/.JPEG|.jpeg|.JPG|.jpg|.GIF|.gif/)) { //判断上传文件格式
        AlertMSG('上传的文件格式不正确')
        return false;
      }
      return true;
    } else {
      AlertMSG('只能上传一个文件')
      return false;
    }
  }

  var uploadFiles = function(files) {
    var form_data = new FormData();
    form_data.append("myfile", files[0]);
    // 提交ajax的请求
    $.ajax({
        url: "/QLXJ_XJYW_DQJC_ADD_UPLOADFILE/",
        type: 'POST',
        data: form_data,
        processData: false, // tell jquery not to process the data
        contentType: false, // tell jquery not to set contentType
        success: function(result) {
          //console.log(result.data)
          if(result.status == 1) {
            // alert("上传成功！");
            // layer.tips('上传成功!', '#add_botton');
            message_layer('上传成功!');
            // console.log(result)

            $('#img_ul').append('<div class="imgDiv" ><img src="'+result.data[0].file_url+'"  style="max-width: 500px;padding: 5px;"/><div class="delete" attr1="'+result.data[0].file_name+'"  attr2="'+result.data[0].file_url+'" attr3=0></div></div>');
            init();

          } else {
            AlertMSG(result.message)
          }

        }
      
    });
  }
// message_layer(data.message)
function message_layer(message){
    layer.msg(message, {
    time: 1000 //2秒关闭（如果不配置，默认是3秒）
  }); 
}
function insertTitle(path){  
   var test1 = path.lastIndexOf("/");  //对路径进行截取
   var test2 = path.lastIndexOf("\\");  //对路径进行截取
   var test= Math.max(test1, test2)
   if(test<0){  
     document.getElementById("file_name").value = path;
   }else{
    document.getElementById("file_name").value = path.substring(test + 1); //赋值文件名
   }  
}  

function check(id){
  $('#'+id).click();
}

function save_add(){
  var disease_id = $("#disease_id option:selected").val();
  var member_id = $("#bridge_member").attr("attr1");
  var scale_id = $("#disease_scale_id option:selected").val();
  var position = $("#position").html();
  var description = $("#description_des").html();
  var attrList = $("#data_past").val();
  var photoList = get_photo();
  var remark = $("#remark").val();
  
  // var ccc= {"disease_id":disease_id,"member_id":member_id,"scale_id":scale_id,"position":position,"description":description,"attrList":attrList,"photoList":photoList,"remark":remark,"check_id":check_id}
  // console.log(photoList);
  if(member_id == '' || member_id == undefined){
    AlertMSG("请选择构件编号！")
  }else if (disease_id == '' || disease_id == undefined){
    AlertMSG("请选择病害类型！")
  }else if (scale_id == '' || scale_id == undefined){
    AlertMSG("请选择病害标度！")
  }else if (position == '' || position == undefined){
    AlertMSG("请选择病害位置！")
  }else {
    $.ajax({
      "url":"/QLXJ_XJYW_JCJC_DISEASE_MODIFYSAVE/",
      "datatype":"json",
      "data":{"disease_id":disease_id,"member_id":member_id,"scale_id":scale_id.substring(0,scale_id.indexOf(',')),"position":position,"description":description,"attrList":attrList,"photoList":photoList,"remark":remark,"check_record_id":check_record_id},
      "type":"post",
      "async":"false"
      }).success(function(data){
        if (data.status == 1) {
          back_to();
        } else {
          AlertMSG(data.message)
        }
      }).error(function(data){
        AlertMSG("删除失败！")
      });
  }

}

function get_photo(){
  var list = [];
  $('#img_ul').find('.delete').each(function(a){
    var data = {};
    data['file_name'] = $(this).attr("attr1");
    data['file_url'] = $(this).attr("attr2");
    data['file_id'] = $(this).attr("attr3");
    list.push(data);
  })

  return JSON.stringify(list);
}


  function popup(title,url){
        var index = layer.open({
            type: 2,
            title: title,
            content: url,
            area: ['600px', '400px'],
            
        });

        
        //铺满界面
        //layer.full(index);
  }
  var AlertMSG=function(msg){
    AMUI.dialog.alert({ title: '错误提示', content: msg, onConfirm: function() { console.log('close'); } });
  }

</script>
</body>

</html>